<!--
  *  此组件不用, 只是拿来参考写 地图组件
 * @FileDescription: 客运订单详情
 * @Author: 苏镇钊
 * @Date: 2020.07.22
 * @LastEditors: 苏镇钊
 * @LastEditTime: 2020.10.01
 -->
<template>
	<view class="zxt-n-container">
		<!-- #ifdef APP-PLUS -->
		<web-view  :webview-styles="webviewStyles" :src="messageForWebview" @message="getWebviewMessage"></web-view>
		<!-- #endif -->
		<zxt-navbar
		:functional="navbar.functional"
		:title="navbar.title"
		:show="navbar.show"
		></zxt-navbar>
		<view class="order-header" v-if="!showflag">
			<p><i></i>此订单已失效</p>
		</view>
		<view v-if="showflag">
			<view class="map" id="map" :class="[{'map-hide':scrolling}]">
				<view class="zxt-loading-dark zxt-container-center" v-if="!mapReady"></view>
			</view>
			<view class="bus-container">
				<view class="bus-detail">
					<view class="bus-detail-top">
						<view class="dirver-detail-box">
							<view class="driver-detail-top zxt-flex zxt-flex-align-center zxt-flex-justify-start">
								<view class="driver-destination">
									{{orderGroup.driverDetailGroup.location}}
								</view>
								<view class="driver-car-number">
									{{orderGroup.driverDetailGroup.number}}
								</view>
							</view>
							<view class="zxt-normal-text-box">
								<em>姓名：</em>
								<i>{{orderGroup.driverDetailGroup.driverName}}</i>
							</view>
							<view class="zxt-normal-text-box">
								<em>年龄：</em>
								<i>{{orderGroup.driverDetailGroup.year}}</i>
							</view>
							<view class="zxt-normal-text-box">
								<em>驾龄：</em>
								<i>{{orderGroup.driverDetailGroup.experience}}</i>
							</view>
							<view class="zxt-normal-text-box">
								<em>身份证：</em>
								<i>{{orderGroup.driverDetailGroup.id}}</i>
							</view>
						</view>
					</view>
					<view class="bus-detail-bottom zxt-flex zxt-flex-justify-between" v-if="stepbuttonflag">
						<view class="bd-code zxt-flex zxt-flex-align-center zxt-flex-column zxt-flex-justify-center">
							<zxt-button
							:text="buttonGroup[0].text"
							:type="buttonGroup[0].type"
							:handle="buttonGroup[0].handle"
							:size="buttonGroup[0].size"
							></zxt-button>
						</view>
						<view class="bd-empty"></view>
						<view class="bd-code zxt-flex zxt-flex-align-center zxt-flex-column zxt-flex-justify-center">
							<zxt-button
							:text="buttonGroup[1].text"
							:type="buttonGroup[1].type"
							:handle="buttonGroup[1].handle"
							:size="buttonGroup[1].size"
							></zxt-button>
						</view>
					</view>
				</view>
				<view class="bus-sited-container">
					<view class="bs-detail">
						<view class="bs-detail-top zxt-flex zxt-flex-align-center zxt-flex-justify-between">
							<p class="bsd-total"><i></i>共<b>{{orderGroup.stepGroup.length}}</b>站</p>
							<p class="bsd-time"><i></i>全程30分钟</p>
						</view>
						<view class="bs-detail-bottom zxt-flex zxt-flex-align-center zxt-flex-justify-center">
							<view class="bs-detail-pos zxt-flex zxt-flex-align-center zxt-flex-justify-center">
								<i></i>
								<p>{{orderGroup.driverDetailGroup.start_site}}</p>
							</view>
							<view class="bs-go zxt-flex">
								<em></em>
								<em></em>
								<em></em>
							</view>
							<view class="bs-detail-pos zxt-flex zxt-flex-align-center zxt-flex-justify-center">
								<i></i>
								<p>{{orderGroup.driverDetailGroup.end_site}}</p>
							</view>
						</view>
					</view>
					<zxt-step-column
					v-if="stepGroupFlag"
					@returnStep="getCurrentStep"
					@updateMap="updateMap"
					:group="orderGroup.stepGroup"
					:control="true"
					:at="'确认到站'"
					:dt="'已到站'"
					:rt="'未到站'"
					:tids="tids"
					:orderid="order_id"
					></zxt-step-column>
				</view>
			</view>
		</view>
		<view class="empty"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 学生上下车扫码按钮显示
				stepbuttonflag:false,
				// 司机id
				driver_id:'',
				longitude:this.$store.state.longitude,
				latitude:this.$store.state.latitude ,
				messageForWebview:'',
				map:null,
				// webview样式
        webviewStyles: {
          progress: {
            color: false
          },
          background:'transparent',
          webviewBGTransparen:true
        },
				navbarHeight:0,
				mapHeight:0,
				scrolling:false,
				mapReady:false,
				// 显示标志
				showflag:true,
				// 订单id
				order_id:0,
				// 导航栏参数
				navbar:{
					functional:false,
					title:'客运订单详情',
					show:true
				},
				
				key:this.$store.state.key,
				sid:this.$store.state.sid,
				//车辆的终端ID
				tids:'',
				// 路线的ID
				line_id:'',
				// 车辆目前到站点
				nowsiteId:'',
				student:[],
				stepGroupFlag:true,
				orderGroup:{
					// 客运司机信息
					driverDetailGroup:{
						title:'客运司机信息',
						hasButton:false,
						blank:false,
						number:'',
						location:'',
					},
					// 步骤集合
					stepGroup:[
					],
				},
				buttonGroup:[
					{
						text:'学生上车',
						size:'normal',
						type:'default',
						handle:()=>{
							if(this.tids == 0){
								this.$zxt.alert('该车辆设备号出错！无法进行操作！')
							}else{
								this.stuup()
							}
						}
					},
					{
						text:'学生下车',
						size:'normal',
						type:'default',
						handle:()=>{
							if(this.tids == 0){
								this.$zxt.alert('该车辆设备号出错！无法进行操作！')
							}else{
								this.studown()
							}
						}
					}
				]
			};
		},
		onLoad: function (option) {
      this.order_id = option.order_id;
      this.orderGroup.driverDetailGroup.driverName = option.driverName;
      this.orderGroup.driverDetailGroup.experience = option.experience;
			this.orderGroup.driverDetailGroup.id = option.id;
			this.orderGroup.driverDetailGroup.year = option.year;
			this.orderGroup.driverDetailGroup.start_site = option.start_site;
			this.orderGroup.driverDetailGroup.end_site = option.end_site;
			this.driver_id = option.driver_id;
			this.dataInit()
		},
		methods:{
			// 向webview页面发送消息
			sendWebviewMsg(){
				this.messageForWebview =  this.mapAPI + `/driver_livetrack.html?driver_id=${this.driver_id}`
				this.mapInit()
				// console.log(this.messageForWebview)
			},
			showMap(){
				this.map.show(this.map)
			},
			hideMap(){
				this.map.hide(this.map)
			},
			// 获取webview页面传来的消息
			getWebviewMessage(evt){
				console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
			},
			// 地图初始化
			mapInit() {
        if (this.map == null) {
          this.map = this.$scope.$getAppWebview()
          setTimeout(() => {
            this.map = this.map.children()[0]
            this.map.hide()
          }, 200)
          uni.createSelectorQuery().select('#map').boundingClientRect(data => {
            this.navbarHeight = data.top;
            this.mapHeight = data.height;
            this.mapReady = true;
            setTimeout(() => {
              this.map.setStyle({
                top: data.top,
                height: data.height
              })
              this.map.show(this.map, 'fade-in', 250);
            }, 500);
          }).exec();
        }
      },
			// 确认到站后 更新地图
			updateMap(){
				this.mapInit()
			},
			// 当前站点
			getCurrentStep(id){
				// console.log(this.student)
				// console.log(this.$store.state.stutrid)
				// 到达首站 开放上车扫码功能先隐藏再显示
				this.stepbuttonflag = false
				
				// 更新当前站点 开始
				this.nowsiteId = id
				// 更新当前站点 结束
				this.stepGroupFlag = false
				setTimeout(()=>{
					this.stepGroupFlag = true
					this.stepbuttonflag = true
				},200)
				// console.log(this.orderGroup.stepGroup)
			},
			async dataInit(){
				// 订单查询初始化
				let that = this
				this.tokens = uni.getStorageSync('tokens')
				
				// 判断是否是审核过的用户
				let url = this.apiServer + '/api/Driver/pass/orderDetail'
				let data = {
					token:this.tokens,
					line_id:this.order_id
				}
				// console.log(data)
				let p = await this.$zxt.fetchOnlineData('POST',url,data,'',{})
				// fetchOnlineData(method,url,data,dataType,header)
				// console.log(p)
				if(p.code == 200){
					console.log(p.msg)
					if(p.data.length!=0){
						// console.log( p.data)
						// 车辆的终端ID 保存
						this.showflag = true
						this.tids = p.data.tid
						uni.setStorageSync('tid',p.data.tid);
						// sid 保存
						this.sid = p.data.sid
						this.$store.commit('updatesid',p.data.sid)
						//车牌号
						this.orderGroup.driverDetailGroup.number = p.data.plate_number
						// 路线
						this.orderGroup.driverDetailGroup.location = p.data.line_name
						// 地点
						this.orderGroup.stepGroup = p.data.site
						// 保存当前到站点
						this.nowsiteId = p.data.site[0].id
						let noget = true
						// 到达首站 开放上车扫码功能
						if(this.orderGroup.stepGroup[0].arrived_status == 1){
							this.stepbuttonflag = true
						}else{
							this.stepbuttonflag = false
							// 清除 trid 开始
							uni.setStorageSync('trid', '');
							// 清空缓存
							uni.setStorage({
							    key: 'driverTimer',
							    data:[]
							});
							uni.setStorage({
							    key: 'driverId',
							    data:[]
							});
						}
						this.orderGroup.stepGroup.forEach(i=>{
							i.date = i.site_time.split(' ')[0]
							i.time = i.site_time.split(' ')[1]
							// i.state = i.arrived_status
							// state 1已到站，0未到站，-1还差得远
							// arrived_status 0未到  1到
							if(i.arrived_status==1){
								i.state = 1
								this.nowsiteId = i.id
							}else if(i.arrived_status == 0){
								if(noget){
									i.state = 0
									noget = false
								}else{
									i.state = -1
								}
							}
							i.title = i.site_name
						})
						// console.log(this.orderGroup.stepGroup)
						
						// 容错 轨迹号存在 并 timer定时器未开启 开启定时器
						if(p.data.vehicle_trid != 0 && this.$store.state.timer != null){
							this.$store.commit('setTimer')
						}
						
						//学生信息保存
						this.student = p.data.student
						// console.log(this.student)
						setTimeout(()=>{
							this.sendWebviewMsg()
						},500)
					}
				}else if(p.code == 500){
					console.log(p.msg)
					this.showflag = false
				}else{
					console.log(p.err)
					this.showflag = false
				}
			},
			stuup(){
				let that = this
				// console.log(that.nowsiteId)
				// 学生上车扫码
				uni.scanCode({
				    success: function (res) {
						let strs = JSON.parse(res.result)
						let stuno = strs.stuno
						let stu_name = strs.stu_name
						// console.log(stuno)
						// console.log(stu_name)
						if(stuno!='' && stu_name!=''){
							// console.log(that.student)
							let thisStuTrid = ''
							that.student.forEach(i=>{
								if(i.stu_no == stuno){
									thisStuTrid = i.trid
								}
							})
							if(thisStuTrid != ''){
								that.$zxt.alert(stu_name+' 已上车！')
							}else{
								// thisStuTrid == '' 即学生未上车 符合条件
								// 学生学号 学生姓名
								// 创建轨迹 并持续传点
								console.log('创建学生轨迹')
								let data = {
									key:that.$store.state.key,
									sid:that.$store.state.sid,
									tid:String(that.tids)
								}
								console.log(data)
								uni.request({
									url:'https://tsapi.amap.com/v1/track/trace/add',
									method:'POST',
									header: {
										'content-type': 'application/x-www-form-urlencoded',
									},
									dataType:'json',
									data:data,
									success(res1) {
										console.log(res1)
										if(res1.statusCode == 200){
											console.log('创建学生轨迹成功！'+res1.data.data.trid)
											
											//提交学生上车信息
											that.tokens = uni.getStorageSync('tokens')
											let url2 = that.apiServer + '/api/Driver/pass/studentRide'
											let data2 = {
												token:that.tokens,
												site_id:that.nowsiteId,
												stu_no:stuno,
												stu_name:stu_name,
												trid:res1.data.data.trid,
											}
											console.log(data2)
											// console.log(url2)
											let p2 = that.$zxt.fetchOnlineData('POST',url2,data2,'',{})
											// fetchOnlineData(method,url,data,dataType,header)
											p2.then((res2)=>{
												console.log(res2)
												if(res2.code == 200){
													//开始传值
													console.log(stu_name+res2.msg)
													// 开始传学生坐标点
													// console.log(res1.data.data.trid)
													that.$store.commit('addStuTrid',res1.data.data.trid)
													that.student.push({stu_no:stuno,trid:res1.data.data.trid})
													// that.$zxt.alert(stu_name+res2.msg)
													uni.showModal({
													    title: '提示',
													    content: stu_name+res2.msg,
													    showCancel:false
													});
													//更新数据
													that.moreguestDetail(that.line_id)
												}else if(res2.code == 500){
													console.log(res2.msg)
													that.$zxt.alert(res2.msg)
												}else{
													console.log(res2.err)
													that.$zxt.alert(stu_name+'上车失败！')
												}
											})
											
										}
									},
									fail: (err) => {
										console(err)
										console.log('创建学生轨迹失败！')
									}
								})
							}
						}else{
							that.$zxt.alert('学生信息获取失败！')
						}
				    },
					fail: function (err) {
						// console.log(err)
						that.$zxt.alert('扫码取消')
				    },
				});
			},
			studown(){
				let that = this
				// console.log(that.nowsiteId)
				// 学生下车扫码
				uni.scanCode({
				    success: function (res) {
						let strs = JSON.parse(res.result)
						let stuno = strs.stuno
						let stu_name = strs.stu_name
						// console.log(stuno)
						// console.log(stu_name)
						if(stuno!='' && stu_name!=''){
							// 学生学号 学生姓名
							let index = 0
							let thisStuTrid = ''
							// console.log(that.student)
							that.student.forEach((i,j)=>{
								if(i.stu_no == stuno){
									// console.log(i.stu_no)
									// console.log(i.trid)
									thisStuTrid = i.trid
									index = j
								}
							})
							if(thisStuTrid == ''){
								that.$zxt.alert(stu_name+' 未上车！请上车扫码！')
							}else{
								// thisStuTrid!= '' 符合条件，该乘客已上车
								//提交学生下车信息
								that.tokens = uni.getStorageSync('tokens')
								let url2 = that.apiServer + '/api/Driver/pass/studentRide'
								let data2 = {
									token:that.tokens,
									site_id:that.nowsiteId,
									stu_no:stuno,
									stu_name:stu_name,
									trid:thisStuTrid,
								}
								// console.log(data2)
								// console.log(url2)
								let p2 = that.$zxt.fetchOnlineData('POST',url2,data2,'',{})
								// fetchOnlineData(method,url,data,dataType,header)
								p2.then((res2)=>{
									// console.log(res2)
									if(res2.code == 200){
										//开始传值
										console.log(stu_name+res2.msg)
										// 结束传学生坐标点
										that.$store.commit('delStuTrid',thisStuTrid)
										that.student.splice(index,1)
										// that.$zxt.alert(stu_name+res2.msg)
										uni.showModal({
										    title: '提示',
										    content: stu_name+res2.msg,
										    showCancel:false
										});
										//更新数据
										that.moreguestDetail(that.line_id)
									}else if(res2.code == 500){
										console.log(res2.msg)
										that.$zxt.alert(res2.msg)
									}else{
										console.log(res2.err)
										that.$zxt.alert(stu_name+'下车失败！')
									}
								})
							}
						}else{
							that.$zxt.alert('学生信息获取失败！')
						}
				    },
					fail: function (err) {
						// console.log(err)
						that.$zxt.alert('扫码取消')
				    },
				})
			},
		},
		onPageScroll(e) {
      let top = -e.scrollTop + this.navbarHeight;
      this.map.setStyle({
        top
      })
      if (top < this.navbarHeight) {
        this.scrolling = true
        this.map.setStyle({
          opacity: '0',
          height: '0'
        })
      }
			else{
				this.scrolling=false
				this.map.setStyle({
					opacity:'1',
					height:this.mapHeight
				})
			}
		},
		onPullDownRefresh() {
			console.log('refresh!')
			// 重新加载数据
			this.mapInit()
			this.dataInit()
			wx.stopPullDownRefresh();
			this.$zxt.alert('刷新成功')
		},
	}
</script>

<style lang="scss" scoped>
	
	.empty{
		height:50vh
	}
	.map{
		transition: height .45s $zxt-ani-normal;
		will-change: height;
		width: 100%;
		height: 600rpx;
		position: relative;
		background: $mult-background-color;
	}
	.map-hide{
		height: 0;
	}
	.dirver-detail-box{
		padding:$inner-vertical-padding $inner-padding;
		.driver-detail-top{
			width: 100%;
			height: 100rpx;
			box-sizing: border-box;
			border-bottom:.5px solid $mult-background-color;
			.driver-destination{
				padding: 0 0 0 50rpx;
				font-size: 35rpx;
				color: $font-color;
				position: relative;
				&:before{
					content: '';
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					border-radius: 50%;
					background: $normal-dark-color;
					left: 0;
					top: calc(50% - 17rpx);
				}
			}
			.driver-car-number{
				margin: 0 0 0 $inner-padding;
				border-radius: $ext-small-ele-radius;
				padding: $inner-vertical-padding $inner-padding;
				background: $notice-color;
				color: $c-background-color;
				font-size: 25rpx;
				position: relative;
				&:before{
					content: '';
					width: 90%;
					height: 80%;
					border: 1px solid $c-background-color;
					left: 5%;
					box-sizing: border-box;
					top: 10%;
					border-radius: $ext-small-ele-radius;
					position: absolute;
				}
			}
		}
	}
	.bus-container{
		width: 100%;
		box-sizing: border-box;
		padding: 0 $inner-padding;
		.bus-sited-container{
			width: 100%;
			position: relative;
			margin-top: 160rpx;
			.bs-detail{
				position: absolute;
				left: 0;
				top: -150rpx;
				width: 100%;
				border-top-left-radius: $ext-small-ele-radius;
				border-top-right-radius: $ext-small-ele-radius;
				height: 150rpx;
				background: $c-background-color;
				padding: 0 $inner-padding;
				box-sizing: border-box;
				.bs-detail-top{
					width: 100%;
					height: 40%;
					>p{
						font-size: 25rpx;
						color: $font-color;
						>i{
							@extend %remove-default-style;
							margin: 0 $inner-vertical-padding 0 0;
							width: 50rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							font-size: 30rpx;
						}
					}
					.bsd-total{
						>i{
							color: $s-font-color;
							&:before{
								content: $fa-var-bus;
							}
						}
					}
					.bsd-time{
						>i{
							color: $ele-alert-color;
							&:before{
								content: $fa-var-flag;
							}
						}
					}
				}
				.bs-detail-bottom{
					width: 100%;
					height: 60%;
					border-bottom:1px solid $mult-background-color;
					box-sizing: border-box;
					.bs-go{
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						color: $normal-dark-color;
						margin: 0 $inner-padding;
						>em{
							@extend %remove-default-style;
							display: block;
							width: 20rpx;
							font-size: 25rpx;
							&:before{
								content: $fa-var-chevron-right;
							}
						}
						@for $i from 1 through 3 {
						  >em:nth-child(#{$i}) {
							  animation: blinking 1s ease-out infinite ($i * .3s);
						  }
						}
					}
					.bs-detail-pos{
						>i{
							@extend %remove-default-style;
							margin: 0 $inner-vertical-padding 0 0;
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: $normal-dark-color;
							margin: 0 $inner-vertical-padding 0 0;
						}
						>p{
							font-weight: bolder;
							font-size: 35rpx;
							color: $font-color;
						}
					}
				}
			}
		}
		.bus-detail{
			width: 100%;
			height: 400rpx;
			.bus-detail-bottom{
				width: 100%;
				height: 15%;
				.bd-code{
					height: 100%;
					width: 30%;
					border-radius: 15px;
					font-size: 30rpx;
				}
			}
			.bus-detail-top{
				width: 100%;
				height: 85%;
				background: $c-background-color;
				border-bottom-left-radius: $small-ele-radius;
				border-bottom-right-radius: $small-ele-radius;
			}
		}
	}
	.loading-box{
		width: 100%;
		padding: $inner-padding;
	}
	.la{
		position: relative;
		.mask{
			width: 100%;
			height: 72vh;
			left: 0;
			bottom: 0;
			background: linear-gradient(0deg,$background-color 64%,rgba(255,255,255,0) 91%);
			position: absolute;
			>p{
				font-size: 30rpx;
				color: $font-color;
				margin:0 0 $inner-padding;
			}
		}
		.other-mask{
			width: 100%;
			padding: $inner-padding 0;
			>p{
				font-size: 30rpx;
				color: $font-color;
				margin:0 0 $inner-padding;
			}
		}
	}
	.driver-order-container{
		width: 100%;
		padding: $inner-padding;
		box-sizing: border-box;
		.driver-order-item{
			width: 100%;
			height: 180rpx;
			border-radius: $ext-small-ele-radius;
			background: $c-background-color;
			margin: $inner-padding 0;
			overflow: hidden;
			.do-left{
				width: 80%;
				height: 100%;
				opacity: hidden;
				padding: 0 $inner-padding;
				box-sizing: border-box;
				.do-left-top{
					width: 100%;
					height: 40%;
					box-sizing: border-box;
					border-bottom: .5px solid $mult-background-color;
					>em{
						@extend %remove-default-style;
						color: $s-font-color;
						font-size: 25rpx;
					}
					.dlt-right{
						>p{
							font-size: 25rpx;
							margin: 0 $inner-padding;
							>i{
								display: block;
								margin:0 $inner-vertical-padding 0 0;
								@extend %remove-default-style;
								width: 30rpx;
								height: 30rpx;
								line-height: 30rpx;
								text-align: center;
								&:before{
									font-size: 35rpx;
									color: $s-font-color;
									content: $fa-var-clock-o;
								}
							}
						}
						>span{
							font-size: 25rpx;
							color: $ele-alert-color;
							>i{
								margin:0 $inner-vertical-padding 0 0;
								@extend %remove-default-style;
								display: block;
								width: 30rpx;
								height: 30rpx;
								line-height: 30rpx;
								background: $ele-alert-color;
								text-align: center;
								border-radius: 50%;
								&:before{
									font-size: 10px;
									color: $c-background-color;
									content: $fa-var-cny;
								}
							}
						}
					}
				}
				.do-left-bottom{
					width: 100%;
					height: 60%;
					>p{
						width: 50rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						margin: 0 $inner-vertical-padding;
						color: $s-font-color;
						font-size: 25rpx;
						&:before{
							content: $fa-var-chevron-right;
						}
					}
					.dlb-pos{
						width: 40%;
						color: $font-color;
						font-size: 28rpx;
						>p{
							@extend %rowOverflow;
							text-align:center;
							display: block;
							width: 100%;
							margin: 0 0 $inner-vertical-padding;
						}
						>i{
							display: block;
							width: 100%;
							@extend %remove-default-style;
							@extend %rowOverflow;
							text-align:center;
						}
					}
					.dlb-pos-lock{
						width: 30%;
						height: 70rpx;
						line-height: 30rpx;
						padding: $inner-padding;
						box-sizing: border-box;
						border: 1px solid $mult-background-color;
						background: $c-background-color;
						text-align: center;
						color: $mult-background-color;
						font-size:35rpx;
						&:before{
							content: $fa-var-lock;
						}
					}
				}
			}
			.do-right-u,.do-right{
				width: 20%;
				height: 100%;
				color: $c-background-color;
				text-align: center;
				>p{
					display: block;
					margin: 0 0 $inner-vertical-padding;
					font-size: 30rpx;
					font-weight: bolder;
				}
				
			}
			.do-right-u{
				background: $mult-background-color;
				color: $mult-font-color;
				>i{
					@extend %remove-default-style;
					display: block;
					padding: 5rpx $inner-vertical-padding;
					border-radius: $small-ele-radius;
					font-size: 25rpx;
					width: 80%;
					height: 60rpx;
					line-height: 50rpx;
					border: 1px solid $mult-font-color;
					box-sizing: border-box;
					&:before{
						content: $fa-var-lock;
					}
				}
			}
			.do-right{
				background: $ele-main-color;
				>i{
					@extend %remove-default-style;
					display: block;
					width: 25rpx;
					height: 25rpx;
					border-radius: 50%;
					background: $ele-alert-color;
					animation: fadeIn 2s $zxt-ani-normal infinite alternate;
				}
			}
		}
	}
	.b{
		opacity: 0;
	}
	.b-ready{
		animation: fadeIn 1s $zxt-ani-normal forwards;
	}
	
	
	/deep/.zxt-area-container{
		padding: 0;
	}
	.final-box{
		padding: $inner-padding*4 0;
	}
	.rewards-total{
		width: 100%;
		padding: $inner-padding*2 $inner-vertical-padding;
		box-sizing: border-box;
		border-top: 1px solid $s-font-color;
		>p{
			font-size: 30rpx;
			color: $font-color;
		}
		>em{
			font-size: 35rpx;
			@extend %remove-default-style;
			color: $ele-alert-color;
			text-align: right;
			font-weight: bolder;
		}
	}
	.rewards-item{
		width: 100%;
		padding: $inner-padding $inner-vertical-padding;
		box-sizing: border-box;
		>p{
			font-size: 30rpx;
			color: $font-color;
		}
		>span{
			color: $ele-alert-color;
			font-weight: bolder;
			font-size: 30rpx;
			>i{
				@extend %remove-default-style;
				display: block;
				background: $ele-alert-color;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				margin: 0 0 0 $inner-vertical-padding;
				color: $c-background-color;
				text-align: center;
				font-weight: normal;
				border-radius: 50%;
				&:before{
					font-size: 25rpx;
					content: $fa-var-cny;
				}
			}
		}
	}
	.goods-item-box{
		width: 100%;
		padding: $inner-padding $inner-vertical-padding;
		box-sizing: border-box;
		.gi-left{
			width: 70%;
			>i{
				@extend %remove-default-style;
				display: block;
				margin:  0 $inner-vertical-padding 0 0;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background:$normal-dark-color;
			}
			>p{
				width: calc(100% - 20rpx);
				word-break: break-all;
				font-size: 30rpx;
				font-weight: bolder;
			}
		}
		.gi-right{
			width: 30%;
			>p{
				font-size: 30rpx;
				color: $s-font-color;
			}
		}
	}
	

	.order-header{
		width: calc(100% - 20rpx);
		margin: 0 auto;
		border-radius: $ext-small-ele-radius;
		background: '#F8F8F8';
		color: '#F8F8F8';
		padding: $inner-vertical-padding $inner-padding;
		box-sizing: border-box;
		transform: translateY(-40rpx);
		top:10rpx;
		>p{
			font-size: 26rpx;
			margin: $inner-vertical-padding 0;
			>i{
				@extend %remove-default-style;
				color: $main-highlight-color;
			}
		}
	}
	.order-basic-detail-container{
		width: 100%;
		height: 500px;
		padding: $inner-vertical-padding $inner-padding;
		box-sizing: border-box;
		.order-basic-detail{
			width: 100%;
			border-radius: $ext-small-ele-radius;
			background: $c-background-color;
			position: relative;
			overflow: hidden;
			padding: 0 0 $inner-padding;
			.ob-d-date-box{
				padding: 0 $inner-padding*3;
				box-sizing: border-box;
				.ob-d-date-content{
					color: $font-color;
					padding: $inner-vertical-padding 0;
					>p{
						font-size: 30rpx;
						font-weight: bolder;
					}
					>i{
						@extend %remove-default-style;
						font-size: 25rpx;
						word-break: break-all;
					}
				}
				.ob-d-date-header{
					width: 100%;
					height: 70rpx;
					position: relative;
					&:before{
						display: block;
						width: 100%;
						height: 1px;
						background: $s-font-color;
						left: 0;
						top: 50%;
						content: '';
						z-index: 2;
						position: absolute;
					}
					>p{
						position: absolute;
						z-index: 3;
						background: $s-font-color;
						color: $c-background-color;
						font-size: 30rpx;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						left: calc(50% - 25rpx);
						top: calc(50% - 25rpx);
						text-align: center;
						line-height: 50rpx;
					}
				}
			}
			.ob-d-desc{
				width: 100%;
				height: 110rpx;
				position: absolute;
				left: 0;
				top: 0;
				>p{
					font-size: 35rpx;
					color: $c-background-color;
					font-weight: bolder;
					margin: 0 $inner-padding*2 0 0;
					>i{
						@extend %remove-default-style;
						margin:0 $inner-vertical-padding 0 0;
						display: block;
						width: 50rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						&:before{
							font-weight: normal;
							font-size: 60rpx;
							content: $fa-var-clock-o;
						}
					}
				}
				>span{
					font-size: 35rpx;
					color: $c-background-color;
					font-weight: bolder;
					>i{
						@extend %remove-default-style;
						margin:0 $inner-vertical-padding 0 0;
						display: block;
						width: 50rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 50%;
						background: $c-background-color;
						text-align: center;
						&:before{
							font-weight: normal;
							color: $ele-main-color;
							content: $fa-var-cny;
						}
					}
				}
				
			}
			.ob-d-cover{
				pointer-events: none;
				width: 120%;
				height: 180rpx;
				border-radius: 50%;
				background: $ele-main-color;
				transform: translateX(-8%) translateY(-20%);
			}
		}
	}
</style>
